
<template>
  <div>
    <!-- 顶部区域 -->
    <van-nav-bar title="前端最牛逼.vant" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 图片滑块区域 -->
    <van-tabs v-model="active" swipeable @click="onClick">
      <van-tab v-for="item in imgCategory" :title="item.title" :key="item.id">
        <!-- 大波图片即将来袭 -->
        <div class="photo" v-for="item in imagesList" :key="item.id" @click="goToWhere(item.id)">
          <img :src="item.img_url" v-lazy="item.img_url" />
          <p class="top">{{item.title}}</p>
          <p>{{item.zhaiyao}}</p>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 底部跳转区域 -->
    <!-- <van-tabbar v-model="active">
      <van-tabbar-item class="iconfont icon-index-fill" to="/home">首页</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-icon_zhanghao" to="/member">会员</van-tabbar-item>
      <van-tabbar-item icon="cart-o" info="0" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      // 图片分类列表
      imgCategory: [],
      // 图片列表
      imagesList: [],
      cateId: []
    }
  },
  created() {
    this.getImgCategory()
    this.getImageList()
  },
  methods: {
    // 返回home主页
    onClickLeft() {
      this.$router.push('/home')
    },
    // 获取图片分类
    async getImgCategory() {
      const { data: res } = await this.$http.get('/api/getimgcategory')
      if (res.status !== 0)
        return this.$notify({ type: 'danger', message: '获取图片分类失败!' })
      this.imgCategory = res.message
      this.imgCategory.unshift({ title: '全部', id: 0 })
    },
    // 获取图片列表
    async getImageList(id = 0) {
      const { data: res } = await this.$http.get('/api/getimages/' + id)
      if (res.status !== 0)
        return this.$notify({ type: 'danger', message: '获取图片列表失败!' })
      this.imagesList = res.message
    },
    // 获取点击列表的id
    onClick(name) {
      const cateId = this.imgCategory[name].id
      this.getImageList(cateId)
    },
    // 跳转图片详情页
    goToWhere(imgid) {
      this.$router.push('/photo/info/' + imgid)
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  width: 100%;
  position: fixed;
  top: 0;
}
.photo {
  position: relative;
}
.van-tabs {
  margin-top: 46px;
  img {
    border-radius: 8px;
    width: 100%;
    height: 300px;
    margin-top: 5px;
  }
}
.van-tabs p {
  position: absolute;
  width: 100%;
  top: 243px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.van-tabs .top {
  position: absolute;
  top: 227px;
}
.van-tabs {
  padding: 5px 10px;
}
</style>

